<!-- 公共界面 -->
<template>
	<div>
		<el-container>
			<el-header>
				<div>
					<span><label style="font-size: 30px;">Credit金服贷款</label>
						<el-button type="primary" plain style="margin-left: 1000px;" @click="login">登录</el-button>
						<el-button type="success" plain @click="register">注册</el-button>
					</span>
				</div>
			</el-header>
			<el-main>
				<div>
					<el-carousel :interval="2000" type="card" height="400px">
						<el-carousel-item v-for="item in imges" :key="item.url">
							<img :src="item.url">
						</el-carousel-item>
					</el-carousel>
				</div>
				<!-- 搜索 -->
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple-dark" style="height: 60px;">
							<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="50%">
								<el-form-item style="margin-top: 15px;">
									<el-input v-model="queryParams.id" placeholder="请输入id" />
								</el-form-item>
								<el-form-item style="margin-top: 15px;margin-left: 60px;">
									<el-input v-model="queryParams.productName" placeholder="请输入产品名称" />
								</el-form-item>
								<el-form-item style="margin-top: 15px;margin-left: 60px;">
									<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
									<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
								</el-form-item>
							</el-form>
						</div>
					</el-col>
				</el-row>

				<!-- 表格 -->
				<el-row>
					<el-col :span="8" v-for="(o, index) in tableData" :key="index" style="padding: 4px;">
						<el-card style="height: 250px;text-align: center;" :body-style="{ padding: '2px' }">
							<image-preview style="text-align: center;" :src="o.image" class="image" />
							<div class="bottom clearfix">
								{{ o.productName }}
								<el-button type="info" round @click="getDescriptions(o)">详情</el-button>
								<el-button type="success" round @click="goLogin">购买</el-button>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<!-- 详情 -->
				<el-dialog :title="particulars.title" :visible.sync="open" width="1000px" append-to-body>
					<el-descriptions title="" :visible.sync="open" append-to-body direction="vertical" :column="4" border>
						<el-descriptions-item label="资金方">{{ particulars.escrow }}</el-descriptions-item>
						<el-descriptions-item label="月利率(%)">{{ particulars.monthRate }}</el-descriptions-item>
						<el-descriptions-item label="咨询费率(%)" :span="2">{{ particulars.consultingRate }}</el-descriptions-item>
						<el-descriptions-item label="保证金费率(%)">{{ particulars.marginRate }}</el-descriptions-item>
						<el-descriptions-item label="还款方式">{{ particulars.paymentMethod }}</el-descriptions-item>
						<el-descriptions-item label="还款期限(月)">{{ particulars.loanTerm }}</el-descriptions-item>
					</el-descriptions>
				</el-dialog>
			</el-main>
			<el-footer>
				<!-- 分页
				<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
					:page-sizes="[5, 10, 15, 20]" @pagination="findAll" /> -->
				<el-tag style="margin-left: 1300px;">
					<el-link href="/login" type="primary">查看更多-></el-link>
				</el-tag>
				<br>
				<hr>
			</el-footer>
			<el-header>
				<div class="foot">
					赞助商
				</div>
			</el-header>
		</el-container>
	</div>
</template>

<script>
import { listProduct } from '../../api/credit/creproduct'
export default {
	data() {
		return {
			// 产品列表
			tableData: [],

			// 总条数
			total: 0,

			// 详情
			particulars: {
				title: '贷中贷',
				escrow: '小额银行',
				monthRate: '0.1%',
				consultingRate: '0.02%',
				marginRate: '0.03%',
				paymentMethod: '一次性付款',
				loanTerm: '9个月'
			},
			open: false,

			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 6,
				id: '',
				productName: '',
			},
			imges: [
				{ url: require("./image/kg1.jpeg") },
				{ url: require("./image/kg2.jpeg") },
				{ url: require("./image/kg3.jpeg") },
				{ url: require("./image/kg4.jpeg") },
				{ url: require("./image/kg5.jpeg") },]
		}
	},
	created() {
		this.findAll();
	},
	methods: {
		login() {
			this.$router.push({ path: '/login' })
		},
		register() {
			this.$router.push({ path: '/register' })
		},
		findAll() {
			listProduct().then(res => {
				this.tableData = res.data;
				this.total = res.total;
				console.log(res);
				this.loading = false;
			});
		}, search() {
			listProduct(this.queryParams).then(res => {
				console.log(res);
				this.tableData = res.data;
				this.total = res.total;
				this.loading = false;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			//this.queryParams.pageNum = 1;
			this.search();

		},
		goLogin() {
			this.$confirm('请登录后再购买，是否跳转到登录界面?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '跳转成功!'
				});
				this.login();
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消跳转'
				});
			})
		},
		getDescriptions(data) {
			this.particulars.title = data.productName;
			this.particulars.escrow = data.escrow;
			this.particulars.monthRate = data.monthRate;
			this.particulars.consultingRate = data.consultingRate;
			this.particulars.marginRate = data.marginRate;
			this.particulars.paymentMethod = data.paymentMethod;
			this.particulars.loanTerm = data.loanTerm;
			this.open = true
		},
	}
}
</script>

<style>
.el-header {
	background-color: #B3C0D1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.foot {
	background-color: #B3C0D1;
	text-align: center;
	line-height: 60px;
	margin-top: 50px;
}

.el-aside {
	background-color: #D3DCE6;
	color: #333;
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #E9EEF3;
	color: #333;
	text-align: center;
	line-height: 160px;
}

body>.el-container {
	margin-bottom: 40px;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}

.el-carousel__item h3 {
	color: #475669;
	font-size: 14px;
	opacity: 0.75;
	line-height: 200px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}

.el-row {
	margin-bottom: 20px;
}

.el-col {
	border-radius: 4px;
}

.bg-purple-dark {
	background: #99a9bf;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

.row-bg {
	padding: 10px 0;
	background-color: #f9fafc;
}

.time {
	font-size: 13px;
	color: #999;
}

.bottom {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	width: 300px;
	height: 190px;
	display: block;
	margin-left: 90px;
	margin-top: 4px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both
}
</style>